<template>
	<div class="lxl-login">
		<div :style="{'transform': 'rotateY(' + r + ')'}" class="lxl-content">
			<LxlForm :r.sync="r"/>
			<FindPwd :r.sync="r"/>
		</div>
	</div>
</template>

<script>
import LxlForm from './lxlform'
import FindPwd from './findpwd'
export default {
	name: 'Login',
	components: {
		LxlForm,
		FindPwd
	},
	data () {
		return {
			r: '0deg'
		}
	}
}
</script>

<style scoped lang="less">
.lxl-login{
	height: 100vh;
	background: linear-gradient(0deg, #ffffff, #00ffff);
	display: flex;
	perspective: 1000px;
	.lxl-content{
		height: 300px;
		width: 500px;
		background: #ffffff;
		margin: auto;
		border-radius: 10px;
		position: relative;
		transform-style: preserve-3d;
		transition: 2s;
		/deep/ h1 {
			text-align: center;
			letter-spacing: 1rem;
			margin: 20px 0;
		}
		/deep/ .lxl-form{
			margin-top: 50px;
			padding-right: 100px;
		}
		/deep/ .lxl-wrap{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
